<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 定位布局开始 -->
    <div class="fix">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont">&#xe620;</span>
                    <b>Home</b>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont">&#xe6de;</span>
                    <b>Movies</b>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont">&#xe61d;</span>
                    <b>Series</b>
                </a>
            </li>
        </ul>
    </div>
    <!-- 定位布局结束 -->
    <!-- 头部布局开始 -->
    <div class="top">
        <a href="#">
            <img src="./images/catflix.svg" alt="logo">
        </a>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">
                        <span class="iconfont">&#xe620;</span>
                        <b>Home</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="iconfont">&#xe6de;</span>
                        <b>Movies</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="iconfont">&#xe61d;</span>
                        <b>Series</b>
                    </a>
                </li>
            </ul>
        </div>
        <form action="#">
            <input type="text" value="Search">
            <i class="iconfont">&#xe67d;</i>
            <div class="admin">
                <i class="iconfont">&#xe99e;</i>
            </div>
        </form>
    </div>
    <!-- 头部布局结束 -->
    <!-- 主体布局开始 -->
    <div class="main warp">
        <a href="#">
            <img src="./images/catflix.svg" alt="logo">
        </a>
        <p class="Title warp">免费在线观看电影</p>
        <form action="#">
            <i class="iconfont">&#xe67d;</i>
            <input type="text" placeholder="Search...">
        </form>
        <button>主页</button>
        <h1>常见问题解答</h1>
        <p>
            浏览我们的常见问题解答，获取有关使用我们的流媒体服务（从订阅详细信息到故障排除）的快速解答。获得您所需的帮助，轻松欣赏您喜爱的电影和节目！
        </p>
        <div class="box">
            <input id="toggle" type="checkbox">
            <label for="toggle">
                <h3>什么是Catflix？</h3>
                <i class="iconfont">&#xe88c;</i>
            </label>
            <b>
                Catflix是一个提供各种电影和电视剧的流媒体平台。通过我们，您可以随时随地在任何设备上免费享受令人兴奋的高质量内容。
            </b>
        </div>
    </div>
    <!-- 主体布局结束 -->
     <!-- 底部布局开始 -->
    <div class="copy warp">
        <div>
            <img src="./images/catflix.svg" alt="logo">
        </div>
        <div class="copy-Center">
            <a href="#">Home</a>
            <a href="#">Movies</a>
            <a href="#">Series</a>
            <a href="#">Search</a>
        </div>
        <div class="copy-Bottom">
            <b>&copy;Distv+2023</b>
            <a href="#">Home</a>
            <a href="#">Movies</a>
            <a href="#">Series</a>
            <a href="#">Search</a>
        </div>
    </div>
    <!-- 底部布局结束 -->
</body>
</html>